mi código funciona bien, pero me gustaría hacer un cambio en el que no encontré respuestas con solo buscar. Busco datos dinámicos para las secciones a continuación, pero cuando no tengo datos para completar, me gustaría ocultar el botón, ¿es eso posible?
<style> .elementor-editor-active .hidden{ display:block; } .hidden{ display: none; } .shown{ display: block !important; } </style> <script> var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); var btn4 = document.getElementById("btn4"); btn1.onclick = function(event){ event.preventDefault(); toggleDivs("sect1"); }; btn2.onclick = function(event){ event.preventDefault(); toggleDivs("sect2"); }; btn3.onclick = function(event){ event.preventDefault(); toggleDivs("sect3"); }; btn4.onclick = function(event){ event.preventDefault(); toggleDivs("sect4"); }; function toggleDivs(s){ document.getElementById("sect1").classList.remove("shown"); document.getElementById("sect2").classList.remove("shown"); document.getElementById("sect3").classList.remove("shown"); document.getElementById("sect4").classList.remove("shown"); document.getElementById(s).classList.add("shown"); } btn1.focus(); btn1.click(); </script>No veo su árbol HTML, por lo que realmente no puedo dar una respuesta precisa. Pero puede usar la mutaciónObserver, para que pueda observar su elemento de destino. Si no hay datos, puede ejecutar una función para ocultar botones.
Aquí hay un fragmento que ocultará un botón si el div asociado está vacío:
const divs=document.querySelectorAll("div"), hideAll=()=>divs.forEach(d=>{ // hide all selected divs if (d.innerHTML==="") // hide associated button too, if div is empty: document.getElementById(d.id.replace("sect","btn")).style.display="none" d.style.display="none" }); document.onclick=ev=>{ if(ev.target.tagName==="BUTTON") { if (ev.target.id){ hideAll(); document.getElementById(ev.target.id.replace("btn","sect")).style.display="" } else { divs[2].textContent=""; hideAll() } }} hideAll(); div {background-color:#ddd; padding:10px; margin:6px; border: 1px solid grey} <div id="sect1">This is section one</div> <div id="sect2">This is section two</div> <div id="sect3"><img src="https://picsum.photos/id/123/400/100"></div> <div id="sect4">This is section four</div> <button id="btn1">show one</button> <button id="btn2">show two</button> <button id="btn3">show three</button> <button id="btn4">show four</button> <br><br> <button>empty div#sect3</button>